概念

可以用很多種形式來設定顏色

1. Numeric （數值）

Hex

以 16 進位表示 RGB 三原色，共六位數

h1 {
  color: #b71540;
}

如果要定義透明度的 alpha 值，則加在最後面兩位數，例如：#00000080 的 80 代表 50% 的透明度

RGB

h1 {
  color: rgb(183, 21, 64);
}

使用 rgb() function，以數字或是百分比表示，數字為 0~255，百分比為 0%~100%

黑色可以表示為 rgb(0 0 0) 或是 rgb(0%, 0%, 0%)

alpha 一樣可以用小數點或是百分比表示， 有兩種形式：

1. rgb() 最後面加 /，例如：rgb(0 0 0 / 50%) 或是 rgb(0 0 0 / 0.5)
2. 使用 rgba()，例如：rgba(0, 0, 0, 50%)

HSL

分別代表 Hue (色相)、Saturation (飽和度)、Lightness (亮度)

色相：可以用一個 360 度的色輪來描述，0 度是紅色，180 度是藍色
飽和度：數值越低越接近灰色
亮度：數值越高越白

h1 {
  color: hsl(344, 79%, 40%);
}

如果要定義 alpha，和 rgb() 類似，加 / 或是改用 hsla()

2. 顏色關鍵字

除了以數值表示顏色外，CSS 有替一些顏色特別進行命名，目前有 148 個可使用，例如： purple、tomato、goldenrod

還有一些比較特殊的關鍵字，例如：

• transparent：代表透明
• currentColor：代表內文的顏色

這些顏色關鍵字都代表沒有透明度的純色，而其中有一些顏色是具有別名的，例如：

• aqua / cyan
• gray / grey

參考資源

MDN Web Docs - named-color